<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
</body>
<script src="../css/vue.js"></script>
<script>
    //需求数组数据
    let strData = [5, 30, 40, 60, 110, 250, 20, 900, 80];
    /**
     * 第一个函数 map
     * map和forEach有点像，都是循环遍历数组，但是有一点不同的是，map使用，原来数组不变（要用一个变量接收它，不然你会以为数组没有做操作），返回一个新的数组
     * 使用：map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
     * */
        //现在有一个要求就是数组的数据都乘以2
        //1.传统写法
    let newStrData1 = [];
    for (let i = 0; i < strData.length; i++) {
        newStrData1.push(strData[i] * 2);
    }
    console.log("newStrData1:" + newStrData1);

    //2.map写法,插入函数
    function fun1(value, index, array) {
        console.log("value:" + value + ",index:" + index + ",array:" + array)
        return value * 2;
    }
    const newStrData2 = strData.map(fun1);
    console.log("newStrData2:" + newStrData2);

    //3.map写法,直接套入函数
    const newStrData3 = strData.map((value, index, array) => {
        console.log("value:" + value + ",index:" + index + ",array:" + array)
        return value * 2;
    });
    console.log("newStrData3:" + newStrData3);

    //4.map更加简洁的写法（推荐），p就是数组的数据，如果数组是对象，那p就是对象
    const newStrData4 = strData.map(value => value * 2);
    console.log("newStrData4:" + newStrData4);

</script>
</html>
